<template>
  <div class="app">
    <h1>Hello Vue 3</h1>
    <p>111111111</p>
    <p class="test">sass变量测试</p>
    <button @click="count++">{{ count }}</button>
    <div class="flex"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const count = ref(0);
    return { count };
  },
});
</script>

<style lang="scss">
h1 {
  color: red;
}
.app{
  p{
    color: blue;
  }
  .test{
    color: base.$color-primary;
  }
  .flex{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
